<template>
  <div class="hello">

    <!-- 除了本页面配置以外: 额外需要-->
    <!-- 1, 安装vuex包: 建议3.0.1版本-->
    <!-- 2, 构建store下的index, statue, getters, action, mutation文件
            形成vuex操作闭环 -->
    <!-- 3, 在main.js引入vuex配置  -->
    <button @click="changeLoginStatus">{{loginHomeStatus}}</button>

  </div>
</template>

<script>
// 引入vuex的mapstate映射函数
import { mapState } from "vuex";

export default {
  data(){
    return{
      loginHomeStatus: ""
    }
  },
  computed:{
    // 通过映射, 获得vuex中的state中的参数, 并且把这些参数作为计算属性存在
    // 作为计算属性的好处就是, 计算属性会根据所依赖的属性变化而变化
    ...mapState(['loginStatus', 'userRole']),
  },
  watch: {
    // 监控计算属性, 计算属性改变(本质上是vuex中的state数据改变)触发监听器
    // 监听器在听到数据改变之后, 同步数据到data中
    loginStatus(){
      this.loginHomeStatus = this.loginStatus
    }
  },
  mounted(){
    // 在第一次挂载, 由于不会触发监听器,
    // 需要手动调用vuex的getters中的方法(getters内的方法在获取statue数据)
    // 获取statue中数据, 获取到数据之后, 赋值给data中数据
    this.loginHomeStatus = this.$store.getters.loginStatus
  },
  methods: {
    changeLoginStatus: function () {
      // 触发一个事件通过vuex的dispatch把方法提交给vuex的action
      // 在vuex的action中, 通过commit把事假进一步提交给mutation
      // 在mutation中方法被触发, 进一步再修改statue数据
      this.$store.dispatch('loginStatus', !this.loginHomeStatus)
    }
  }
}
</script>

<style scoped>

</style>
